<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变换</title>
		<style type="text/css">
			.wrap {
				margin: 50px auto;
				width: 800px;
				height: 600px;
				background-color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				/* perspective: 900px;
				transform-style: 3d;
				transform: perspective(900px) rotateY(30deg); */
			}
			.box,.box1 {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 200px;
				height: 200px;
				background-color: #FF6700;
				transition: 2s;
			}
			.box1 {
				background-color: #00FF00
			}
			.wrap:hover .box {
				transform: rotateZ(90deg);
			}
		</style>
	</head>
	<body>
		<!-- 变换 transform
		 2d translate 偏移
		 tanrsform:translateX()
		 沿着X轴水平方向进行偏移 
		 正值向右偏移负值向左偏移
		 tanrsform:translateY()
		 沿着Y轴水平方向进行偏移
	     正值向下偏移负值向上偏移
		 简写方式：transform: translate(Xpot,Ypot);中间的值之间要有逗号
		 
		 2d rotate  旋转
		 transform:rotate
		 
		 -->
		 
		 <div class="wrap">
			<!-- <div class="box1"></div> -->
			 <div class="box"></div>
		 </div>
	</body>
</html>
